<template>
  <el-card v-drag style="max-width: 500px; max-height: 500px" shadow="hover" @mousedown="handleMouseDown">
    <template #header>
      <p >公告信息 <span @mousedown.stop @click.prevent="close">x</span></p>
    </template>
    <div class="box">
      <p>发布公关的区域与物业电话</p>
      <p>
        <el-input
          v-model="keyWords"
          @mousedown.stop
          placeholder="请输入关键词"
          size="small"
          style="width: 260px"
          @keyup.enter="changeKeyword"
        ></el-input>
        <el-button size="small" @mousedown.stop @click.prevent="refresh"
          ><el-icon :size="10"><Refresh /></el-icon
        ></el-button>
        <el-button size="small" @click.prevent="exportTable"
          ><el-icon :size="10"><Upload /></el-icon
        ></el-button>
      </p>
      <div class="none" v-if="areaInfo.length === 0">暂无相关区域</div>
      <div class="table" v-else>
        <table border="1" cellspacing="0">
          <thead>
            <tr>
              <th>区域名称</th>
              <th>电话</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in areaInfo" :key="index">
              <td>{{ item[0] }}</td>
              <td>{{ item[1] }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="info">
      <span>公告信息:</span>
      <textarea @mousedown.stop name="info" v-model="announcement" placeholder="请输入公告信息" class="input"></textarea>
    </div>
    <template #footer>
      <div class="btns">
        <button @mousedown.stop @click="submit">确认</button>
        <button @mousedown.stop @click="close">取消</button>
      </div>
    </template>
  </el-card>
</template>

<script setup>
import { ref, defineEmits, watch } from 'vue';
import { Refresh, Upload } from '@element-plus/icons-vue';
import { useUserStore } from '@/stores/user';
import { storeToRefs } from 'pinia';
import * as XLSX from 'xlsx';
const data = ref([]);
const { pushInfo, areaInfo } = storeToRefs(useUserStore());
const keyWords = ref('');
const announcement = ref('');
const emit = defineEmits(['submit']);
const close = () => {
  pushInfo.value = false;
};
const submit = () => {
  pushInfo.value = false;
  const date = new Date();
  const time = `${date.getFullYear()}-${
    date.getMonth() + 1
  }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
  if (announcement.value) {
    const data = {
      time: time,
      announcement: announcement.value,
    };
    emit('submit', data);
    alert('发布公告成功');
  }
};
//查询
const changeKeyword = () => {
  if (keyWords.value) {
    areaInfo.value = areaInfo.value.filter(item => item[0].includes(keyWords.value));
  }
};
//刷新
const refresh = () => {
  keyWords.value = '';
  console.log(data);
  //areaInfo.value = data
};
// 导出表格为 Excel
const exportTable = () => {
  const worksheet = XLSX.utils.json_to_sheet(areaInfo.value);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, '公共区域');
  XLSX.writeFile(workbook, '公共区域.xlsx');
};
watch(
  () => areaInfo,
  newData => {
    data.value = newData;
    console.log(newData);
  }
);
</script>

<style lang="scss" scoped>
.el-card {
  position: absolute;
  z-index: 99;
  top: 15%;
  left: 36%;
}
.box {
  border: 1px solid #ccc;
  p:first-child {
    background-color: #eee;
    padding: 3px;
  }
  p {
    padding: 10px 5px 10px 150px;
    display: flex;
    gap: 5px;
  }
}
.info {
  width: 100%;
  display: flex;
  height: 80px;
  margin-top: 10px;
  gap: 10px;
  span {
    font-size: 16px;
    font-weight: 600;
  }
  .input {
    padding: 10px;
    width: 270px;
    height: 60px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
}
.table {
  width: 100%;
  height: 100px;
  overflow: auto;
}
table {
  width: 100%;
  border: 1px solid #eee;
  th,
  td {
    text-align: center;
    font-size: 14px;
    font-weight: 550;
    background-color: #eee;
  }
}
:deep(.el-card__header) {
  padding: 10px 20px;
  p {
    font-size: 20px;
    font-weight: 600;
    color: #666;
  }
  span {
    margin-left: 350px;
    color: #999;
    cursor: pointer;
  }
}
:deep(.el-card__body) {
  padding: 0 10px;
}
:deep(.el-card__footer) {
  padding: 10px;
}
.btns {
  width: 200px;
  display: flex;
  gap: 20px;
  margin-left: 350px;
  button {
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
  }
  button:first-child {
    background-color: #0f61a1;
    color: white;
  }
}
.none {
  width: 100%;
  height: 80px;
  font-size: 20px;
  font-weight: 600;
  padding: 30px 160px;
}
</style>
